<template>
	<view class="content">
		<u-bar-height></u-bar-height>
		<u-search-input :showBack="false" :action="true" :jumpType="'navigateTo'" :jumpUrl="'/pages/search/search'" :words="'歌手、歌曲'" class="search"></u-search-input>
		
		<view class="swiper">
			<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current" :mode="mode" field="content">
				<swiper class="swiper-box" @change="change" :current="swiperDotIndex" autoplay="true" interval="3000">
					<swiper-item v-for="(item, index) in info" :key="index">
						<image :src="item.url" mode="aspectFill" class="img"></image>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		
		<scroll-view scroll-y="true" :style="{height: scrollHeight + 'px'}" adjustBottom="true">
			<view class="warp margin_top_10"> 
				<uni-section title="推荐歌单" type="line">
					<uni-grid :column="3" :show-border="false" :square="false">
						<uni-grid-item v-for="(item ,index) in songSheet" :index="index" :key="index" @tap="jumpPlayList(item.id)">
							<view class="grid-item-box">
								<image class="image" :src="item.coverImgUrl" mode="aspectFill" />
								<text class="text">{{item.name}}</text>
								<view class="grid-dot">
									<view class="playCount_box">
										<text class="iconfont icon-bofang_o"></text>
										<text class="playCount">{{item.playCount}} 万</text>
									</view>
								</view>
							</view>
						</uni-grid-item>
					</uni-grid>
				</uni-section>
			</view>
		
			<view class="new_song margin_top_10 padding_bottom">
				<uni-section title="新歌推荐" type="line">
					<u-single-list-image :list="newSong" :geDanFunctions="geDanFunctions" :refs="ref" :show="true"></u-single-list-image>
				</uni-section>
			</view>
		</scroll-view>	
		<view class="playerBox bottom_44">
			<u-player-control></u-player-control>
		</view>
	</view>
</template>

<script>
	import {banners, song_sheet, playList} from '@/API/API.js';
	import util from '@/utils/util.js';
	export default {
		data() {
			return {
				current: 0,
				mode: 'round',
				swiperDotIndex: 0,
				dotsStyles: {},
				info: [],
				songSheet: [],
				ref: 'indexPopup',
				newSong: {
					songs: []
				},
				geDanFunctions: [
					{text: '收藏', type: 'collection'},
					{text: '添加歌单', type: 'add'},
					{text: '查看歌手', type: 'select'}
				],
				scrollHeight: 667
			}
		},
		
		onLoad() {
			this.banners();
			this.song_sheet();
			this.playList();
		},
		
		onReady(){ 
			setTimeout(() => {
				this.getScrollHeight();
			}, 800);
		},
		
		methods: {
			change(e) {
				this.current = e.detail.current
			},
			
			clickItem(e) {
				this.swiperDotIndex = e
			},
			
			banners(){
				banners({type: 1}).then(data => {
					let list = [];
					data.banners.forEach((val, key) => {
						let url = {};
						url.url = val.pic;
						list.push(url)
					});

					this.info = list;
				});

			},
			
			song_sheet(){
				song_sheet({limit: 6, order: 'hot'}).then(data => {
					let list = [];
					data.playlists.forEach((val, key) => {
						let url = {};
						url.id = val.id;
						url.name = val.name;
						url.coverImgUrl = val.coverImgUrl;
						url.playCount = (val.playCount / 1000).toFixed(2);
						list.push(url)
					});
					
					this.songSheet = list;
					
				})
			},
			
			playList(){
				playList({id: 3779629}).then(data => {
					let list = [];
					for(let i = 0; i < 15; i++){
						list.push(data.playlist.tracks[i]);
					}
					this.newSong['songs'] = list;
				})
			},
			
			jumpPlayList(id){
				util.jump('navigateTo', '/pages/list/playList?id=' + id);
			},
			
			getScrollHeight(){
				let heightArr = [];
				heightArr[0] = getApp().globalData.barHeight;
				const query = uni.createSelectorQuery().in(this);
				query.select('.search').fields({size: true})
				query.select('.swiper').fields({size: true})
				query.exec((data) => {
					data.forEach(val => {
						heightArr.push(val.height);
					});
				
					this.scrollHeight = util.scrollHeight(heightArr);
				})
			}
		},
	}
</script>

<style scoped>
	@import url("@/static/css/iconfont.css");
	
	.scroll-Y {
		height: 300rpx;
	}
	
	.swiper{
		width: 100%;
	}
	
	.swiper .img{
		width: 100%;
		height: 100%;
	}
	
	.warp{
		width: 100%;
	}
	
	/deep/.warp .uni-section .uni-section-header{
		padding: 10px 10px 0 10px;
	}
	
	/deep/.warp .uni-grid{
		justify-content: space-between;
		padding-bottom: 16px;
	}
	
	.warp .grid-item-box {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top: 10px;
	}

	.warp .grid-item-box .image {
		width: 99%;
		height: 100px;
	}

	.warp .grid-item-box .text {
		height: 32px; 
		font-size: 12px;
		margin-top: 5px;
		padding: 0 5px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	
	.warp .grid-item-box .grid-dot {
		position: absolute;
		top: 10px;
		right: 2px;
	}
	
	.warp .grid-item-box .playCount_box{
		display: flex;
		align-items: center;
		color: #fff;
		background-color: #17161673;
		border-radius: 4px;
	}
	
	.warp .grid-item-box .playCount_box .playCount{
		font-size: 12px;
		padding-right: 4px;
	}
	
	.new_song{
		width: 100%;
	}

</style>
